javascriptedit button

ES8 Standard Release Overview

6 min read|17. 7. 16.

얼마 전, standard release가 되었는데요, 이 글은 ECMAScript2017 (a.k.a es8)의 주요 스펙에 대해 간단하게 살펴보는 포스팅입니다.

$ npm install --save-dev babel-core babel-preset-es2017

아시다시피 babel을 통해서 바로 es2017을 사용해보실 수 있습니다.

ES8 Overview

es8의 주요 기능은 다음과 같습니다.

  • String.prototype.padStart/String.prototype.padEnd
  • Object.entries/Object.values
  • Object.getOwnPropertyDescriptors
  • Trailing Commas in Function Param Lists
  • Async Functions

간단한 예제를 통해 알아보겠습니다 :)

String padding

String 객체에 두 개의 메소드 padStart, padEnd가 추가되었습니다.

String.prototype.padStart(targetLength [, padString])
String.prototype.padEnd(targetLength [, padString])

메소드를 호출하는 문자열의 길이를 주어진 targetLength에 도달하도록 하는 메소드입니다. padString으로 전달된 문자열을 통해 주어진 길이에 도달할 수 있습니다. padString 값을 따로 전달하지 않는 경우 공백으로 문자열의 길이가 도달하게 됩니다.

padStarat의 경우는 문자열의 시작 부분에 값을 추가하여 문자열의 길이를 조정하고 padEnd는 문자열의 끝 부분에 값을 추가하여 문자열의 길이를 조정합니다.

  • targetLength의 크기가 함수를 호출하는 문자열의 길이보다 작을 경우 문자열의 길이는 변하지 않습니다.
  • padString으로 넘겨진 문자열로 길이를 맞출 경우, 각각의 문자열에 대해서 채워지고 길이를 넘어가게 되면 버려지게 됩니다.
// String.prototype.padStart
'hi'.padStart(1) // 'hi'
'hi'.padStart(2) // 'hi'
'hi'.padStart(5) // '   hi'
'hi'.padStart(5, 'p') // 'ppphi'
'hi'.padStart(5, 'power') // 'powhi'

// String.prototype.padEnd
'hi'.padEnd(1) // 'hi'
'hi'.padEnd(2) // 'hi'
'hi'.padEnd(5) // 'hi   '
'hi'.padEnd(5, 'p') // 'hippp'
'hi'.padEnd(5, 'power') //'hipow'

Object.entries(), Object.values()

Object에 entries() 함수와 values() 함수가 추가되었습니다.

Object.entries(obj)
Object.values(obj)

entries 함수는 파라미터로 전달된 객체의 key-value를 배열로 반환합니다. values 함수는 파라미터로 전달된 객체의 value만을 배열로 반환합니다.

const obj = { '1': 'one', '2': 'two', '3': 'three' }
Object.entries(obj) // [["1", "one"], ["2", "two"], ["3", "three"]]
Object.values(obj) // ["one", "two", "three"]

Object.getOwnPropertyDescriptors

ES5 스펙에서부터 Object.getOwnPropertyDescriptor란 녀석이 있었는데요, 이번에 추가된 함수는 getOwnPropertyDescriptors입니다. (뒤에 's'가 추가되었네요.)

const object = { '1': 'one', '2': 'two', '3': 'three' }
Object.getOwnPropertyDescriptor(object, '1')
// {
//     value: "one",
//     writable: true,
//     enumerable: true,
//     configurable: true
// }

Object.getOwnPropertyDescriptor(obj, prop) 메서드는 주어진 객체 자신의 속성(즉, 객체에 직접 제공하는 속성, 객체의 프로토타입 체인을 따라 존재하는 덕택에 제공하는 게 아닌)에 대한 속성 설명자(descriptor)를 반환합니다. ES5에서는 obj 파라미터에 원시 데이터 타입이 전달될 경우 TypeError가 발생했지만 ES6에서는 객체로 강제하기 때문에 에러가 발생하지 않습니다.

ES8에서는 .getOwnPropertyDescriptors를 제공하여 전달된 객체의 모든 프로퍼티에 대한 descriptor에 접근할 수 있습니다. {1: Object, 2: Object, ...} 형태인 객체로 반환되어 접근할 수 있습니다. (배열로 반환하지 않습니다.)

const object = { '1': 'one', '2': 'two', '3': 'three' }
Object.getOwnPropertyDescriptors(object)
// {
//     1: {
//         configurable: true,
//         enumerable: true,
//         value: "one",
//         writable: true,
//     },
//     2: {
//         ...
//     },
//     3: {
//         ...
//     }
// }

함수 매개 변수 목록에서 후행 쉼표

함수 매개 변수에서 후행 쉼표가 가능해졌습니다. 기존에는 syntax error를 발생시켰습니다. 추가된 이 문법은 다음을 가능하게 합니다.

class Person {
  constructor(firstName, lastName, age) {
    this.firstName = firstName
    this.lastName = lastName
    this.age = age
  }
}

객체를 선언할 때, 후행 comma를 통해 선언한 경우와 비슷하다고 생각됩니다. 수정이 필요할 경우, 수정이 필요한 파라미터의 한 줄만 수정하면 됩니다. 함수를 호출할 때도 마찬가지로 후행 comma를 사용할 수 있습니다.

function tailingComma(param1, param2, param3) {
  console.log(`${param1} ${param2} ${param3}`)
}

tailingComma('hello', 'es8', 'world')

Async functions

이미 많이 들 사용하고 계실거라 생각됩니다만 ES8부터 공식 release되었습니다. 간단한 예제로만 설명하고 넘어갑니다 :)

const fetchData = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('fetch complete!')
    }, 2000)
  })
}

console.log(`before`)
fetchData().then(data => console.log(data))
console.log(`after`)

// console>
// before
// after
// fetch complete!

// Use Async function
const sayComplete = async () => {
  const message = await fetchData()
  console.log(`status: ${message}`)
}

console.log(`before`)
sayComplete()
console.log(`after`)
// console>
// before
// after
// status: fetch complete!

감사합니다 :)

Reference